@mixin scroll-x($scroll-height: 8, $scroll-color: #ff6666, $scroll-bg-color: #f0f0f0) {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: pointer;
  &::-webkit-scrollbar {
    height: $scroll-height + px;
  }
  &::-webkit-scrollbar-track {
    border-radius: ($scroll-height / 2) + px;
    background-color: $scroll-bg-color;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: $scroll-height / 2 + px;
    background-color: $scroll-color;
  }
}

@mixin scroll-y($scroll-width: 6, $scroll-color: #ff6666, $scroll-bg-color: #f0f0f0) {
  overflow-x: hidden;
  overflow-y: auto;
  cursor: pointer;
  &::-webkit-scrollbar {
    width: $scroll-width + px;
  }
  &::-webkit-scrollbar-track {
    border-radius: calc($scroll-width / 2) + px;
    background-color: $scroll-bg-color;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: calc($scroll-width / 2) + px;
    background-color: $scroll-color;
  }
}

@mixin scroll-hidden {
  overflow-x: hidden;
  overflow-y: auto;
  cursor: pointer;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
